<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .bigbox {
        margin: 0 auto;
        width: 900px;
        height: 600px;
        background-color: rgb(243, 243, 243);
        .left-img {
            border: solid 2px #767575;
          width: 400px;
          height: 400px;
          display: inline-block;
          position: relative;
          .mask {
            position: absolute;
            width: 150px;
            height: 150px;
            background-image: url(./images/0050b917760d557daf9a5fe8444724e.png);
            opacity: 0;
          }
        }
        .right-img {
          width: 400px;
          height: 400px;
          display: inline-block;
          opacity: 0;
          border: solid 2px #ccc;

        }
        .img-list {
          width: 400px;
          height: 100px;

          text-align: center;
          .lis {
            li {
              display: inline-block;
              width: 60px;
              height: 60px;
              margin: 0 5px;
              background-image: url("./images/imgA_1.jpg");
            }
          }
        }
      }
    </style>
  </head>
  <body>
    <div class="bigbox">
      <div class="left-img">
        <div class="mask"></div>
      </div>
      <div class="right-img"></div>
      <div class="img-list">
        <ul class="lis">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </body>
  <script>
    window.onload = function () {
      var leftImg = document.querySelector(".left-img");
      var mask = document.querySelector(".mask");
      var rightImg = document.querySelector(".right-img");
      var lis = document.querySelector(".lis");
      var leftImg = document.querySelector(".left-img");
      function $(selector) {
        return document.querySelector(selector);
      }
      function $$(selector) {
        return document.querySelectorAll(selector);
      }
      // 对象
      var imgs = {
        ls: [
          "./images/imgA_1.jpg",
          "./images/imgB_1.jpg",
          "./images/imgC_1.jpg",
        ],
        le: [
          "./images/imgA_2.jpg",
          "./images/imgB_2.jpg",
          "./images/imgC_2.jpg",
        ],
        rt: [
          "./images/imgA_3.jpg",
          "./images/imgB_3.jpg",
          "./images/imgC_3.jpg",
        ],
      };
      leftImg.style.backgroundImage = `url('./images/${imgs.le[0]}')`;
      rightImg.style.backgroundImage = `url('${imgs.rt[0]}')`;
      // 默认显示所有缩略图
      var str = "";
      for (var i = 0; i < imgs.ls.length; i++) {
        var item = imgs.ls[i];
        str += `<li style=' background-image: url("${item}");'></li>`;
      }
      lis.innerHTML = str;
      //   默认第一个缩略图高亮
      lis.children[0].style.border = "solid 2px #000 ";
      leftImg.style.backgroundImage = `url('${imgs.le[0]}')`;
      //   给每个缩略图绑定点击事件
      lis.addEventListener("click", function (e) {
        //   排他思想
        var lis = $$("li");

        if (e.target.tagName.toUpperCase() === "LI") {
          for (var i = 0; i < lis.length; i++) {
            lis[i].style.border = "none";
          }
          e.target.style.border = "2px solid #000";
        }
        var index = 0;
        for (var i = 0; i < lis.length; i++) {
          if (lis[i].style.border === "2px solid rgb(0, 0, 0)") {
            index = i;
          }
        }
        // 通过缩略图的当前索引给左图和右图设置指定的背景图
        leftImg.style.backgroundImage = `url('${imgs.le[index]}')`;
        rightImg.style.backgroundImage = `url('${imgs.rt[index]}')`;
      });
      leftImg.onmousemove = function (e) {
        rightImg.style.opacity = 1;
        mask.style.opacity = 1;
        var left = e.clientX - leftImg.offsetLeft - mask.offsetWidth / 2;
        var top = e.clientY - leftImg.offsetTop - mask.offsetHeight / 2;
        if (left <= 0) {
          left = 0;
        }
        if (top <= 0) {
          top = 0;
        }
        if (left >= leftImg.offsetWidth - mask.offsetWidth) {
          left = leftImg.offsetWidth - mask.offsetWidth;
        }
        if (top >= leftImg.offsetHeight - mask.offsetHeight) {
          top = leftImg.offsetHeight - mask.offsetHeight;
        }
        mask.style.left = left + "px";
        mask.style.top = top + "px";

        rightImg.style.backgroundPositionX = -left + "px";
        rightImg.style.backgroundPositionY = -top + "px";
        
      };
      
      leftImg.onmouseleave=function(e){
            rightImg.style.opacity = 0;
        mask.style.opacity = 0;
    }
    };
  </script>
</html>
